<template>
  <div class="app-container">
    <FilterSearch :value="queryParams" :config="configData" :labelCol="8" :wrapperCol="16" layout="inline">
    </FilterSearch>
    <main>
      <div class="table">
        <a-table :scroll="{ x: 1600 }" bordered :dataSource="tableData.dataSource" :columns="tableData.columns"
          :loading="tableData.loading" :pagination="{ total: tableData.total, showTotal: total => ` 总条数:${total}条` }">
          <template #bodyCell="{ column, index }">
            <template v-if="column.key === 'index'">
              <span>
                {{ (index + 1) }}
              </span>
            </template>
          </template>
        </a-table>
      </div>
    </main>
    <div class="shade" v-show="spin">
      <a-spin size="large" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { user as useUser } from "@/store";
import { getTaskList, downloadTable } from "@/api/commerProcess";
import { downloadFile } from '@/utils';
import { MATERIAL } from '@/utils/config';
import { getUserInfo } from '@/api/login';

const user = useUser();
const router = useRouter();
const spin = ref(false);
const queryParams = ref({
  task: "",
  signer: "",
  createdTime: ""
});
const tableData = reactive({
  dataSource: [],
  columns: [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 80,
      align: 'center'
    },
    {
      title: '合同号',
      dataIndex: 'contractNum',
      key: 'contractNum',
    },
    {
      title: '承租人',
      dataIndex: 'lesseeName',
      key: 'lesseeName',
    },
    {
      title: '车架号',
      dataIndex: 'carNum',
      key: 'carNum'
    },
    {
      title: '入库时间',
      dataIndex: 'warehouseTime',
      key: 'warehouseTime',
      width: 160
    },
    {
      title: '件号',
      dataIndex: 'partNum',
      key: 'partNum',
    },
    {
      title: '档案存储地',
      dataIndex: 'rowNum',
      key: 'rowNum',
      width: 120
    },
    {
      title: '盒号',
      dataIndex: 'caseNum',
      key: 'caseNum'
    },
    {
      title: '排序号',
      dataIndex: 'orderNum',
      key: 'orderNum',
      width: 120
    },
    {
      title: '新档案存储地',
      dataIndex: 'newRowNum',
      key: 'newRowNum',
      width: 120
    },
    {
      title: '新盒号',
      dataIndex: 'newCaseNum',
      key: 'newCaseNum',
      width: 120
    },
    {
      title: '新排序号',
      dataIndex: 'newOrderNum',
      key: 'newOrderNum',
      width: 120
    }
  ],
  total: 0,
  loading: false
});
const configData = computed(() => {
  let config = {
    itemConfig: [
      {
        type: "input",
        prop: "task",
        allowClear: "关闭",
        label: "任务名称",
        placeholder: "请输入",
        disabled: true
      },
      {
        type: "input",
        prop: "signer",
        allowClear: "关闭",
        label: "创建人",
        placeholder: "请输入",
        disabled: true
      },
      {
        type: "input",
        prop: "createdTime",
        allowClear: "关闭",
        label: "创建时间",
        placeholder: "请输入",
        disabled: true
      },
    ],
    operate: [
      {
        icon: "",
        type: "primary",
        name: "导出",
        handleClick: exportData,
        rule: true,
      }
    ],
    rules: {

    },
  };
  return config;
});

function getLoad() {
  if (Object.keys(user.$state.taskInfo).length <= 0) {
    router.push('/commerprocess');
    return false;
  }
  tableData.loading = true;
  getTaskList({ taskId: user.$state.taskInfo.id, taskType: MATERIAL.DAYTASKTYPE }).then(async (res: any) => {
    tableData.dataSource = res.records;
    tableData.total = res.total;
    tableData.loading = false;
    queryParams.value = {
      ...user.$state.taskInfo,
      signer: await getUserInfo({ createGlobalUserId: user.$state.orderInfo.signer })
    };
  });
}
function exportData() {
  spin.value = true;
  downloadTable({ taskId: user.$state.taskInfo.id, taskType: MATERIAL.DAYTASKTYPE }).then((res: any) => {
    if (res) {
      downloadFile(res, "日盘任务档案.xlsx");
    }
    spin.value = false;
  })
}
getLoad();
</script>
<style lang="less" scoped></style>
